<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
	<head>
		<meta name="decorator" content="default"/>
		<title>欢迎登陆重庆国博博览中心人员及物品动态监控系统</title>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/userstatic/css/continuous_listen.css"/>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/userstatic/icon/font-awesome.min.css"/>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/userstatic/css/home.css"/>
		<script src="${ctxStatic}/userstatic/js/esay_tips.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">			
			$(document).ready(function() {
				$("#inputForm").validate({
					submitHandler: function(form){
						loading('正在提交，请稍等...');
						form.submit();
					},
					errorContainer: "#messageBox",
					errorPlacement: function(error, element) {
						$("#messageBox").text("输入有误，请先更正。");
						if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
							error.appendTo(element.parent().parent());
						} else {
							error.insertAfter(element);
						}
					}
				});
			});
			
			$(function() {
				//设置警告信息状态的接口
				var setWarningMessStatus = '';
				//获取警告信息的接口
				var getWarningMessUrl = "${ctx}/guobo/trailLog/searchNoProcTrail";
				//确定已读警告的接口
				var procWarningMessUrl = "${ctx}/guobo/trailLog/procTrail";
				
				var tips_sound = new esayTips("${ctxStatic}/userstatic/sound/tip.mp3");

				var warningArr = '';

				//ajax请求函数，参数依次为 ajax请求地址、传递的参数、请求方式、成功回调函数、错误回调函数
				function ajaxSend(_url, _type, _data, successFun, errorFun) {
				 	$.ajax({
						type: _type,
						url: _url,
						async: false,
						data: _data,
						success: function(data) {
							if(data.code == 0) {
								var result = {
									needdeal: data.data,
									hasDone: data.handleddata
								}
								if(successFun) successFun(result);
							} else {
			    				alert(data.message);
							}
						},
						error: function(err) {
							if(errorFun) errorFun(err);
						}
					}); 
					/* var data = JSON.parse('[{"msg":"办公桌1,rfid[100001]被非法带出[南馆]","time":1491031890250,"traillogid":"1f83a14ce89848cbac2bb8c8e163d557","url":"http://172.16.144.38"},{"msg":"办公桌1,rfid[100001]被非法带出[南馆]","time":1491031350423,"traillogid":"cc3da013aa58488e8b0c2b84137b0e52","url":"http://172.16.144.38"},{"msg":"办公桌1,rfid[100001]被非法带出[南馆]","time":1491031110990,"traillogid":"6c4eb7e6c8614c30aaf3d93f878fc667","url":"http://172.16.144.38"}]');
					var hasDone = JSON.parse('[{"msg": "办公桌1,rfid[100001]被非法带出[南馆]已处理","handleUserName": "张三","handleTime": "2017-11-11","traillogid": "1f83a14ce89848cbac2bb8c8e163d557"},{"msg": "办公桌1,rfid[100001]被非法带出[南馆]已处理","handleUserName": "张三","handleTime": "2017-11-11","traillogid": "1f83a14ce89848cbac2bb8c8e163d557"}]');
					var result = {
						needdeal: data,
						hasDone: hasDone
					}
					successFun(result); */
				}
				//检查新的数据里面是否含有旧的数据里面没有的项
				function checkDiff(_old, _new) {
					var sound = false;
					var render = false;
					var hasNew = false;
					_old = _old ? _old : [];
					$.each(_new, function(key, val) {
						var checkTime = true;
						$.each(_old, function(k, v) {
							if(val.date == v.date) {
								checkTime = false;
							}
						});
						if(checkTime) {
							hasNew = true;
						}
					});

					if(hasNew ||_old.length != _new.length) {
						render = sound = true;
					}

					if(render) {
						warningArr = _new;
					}

					return {
						tips: sound,
						refresh: render,
						newData: _new
					}
				}

				function alertTip(condition) {

					if(condition.refresh) {
						alertShow(JSON.parse(condition.newData));
					}

				}
				
				

				function alertShow(data) {
					var box = $("#alert_dialog_bk");
					var close_bt = $("#alert_dialog_close");
					var html = '';
					if(!box.length) {
						$("body").append("<div id='alert_dialog_bk'></div>");
						box = $("#alert_dialog_bk")
					}
					
					if(!close_bt.length) {
						$("body").append("<div id='alert_dialog_close'>"+data.length+"</div>");
						close_bt = $("#alert_dialog_close");
						close_bt.on('click', function(){
							if(box.is(":visible")){
								box.fadeOut(400);
								close_bt.addClass('close_bt_animate');
							}else{
								box.fadeIn(400);
								close_bt.removeClass('close_bt_animate');
							}
						})
					}

					if(data[0]) {
						box.show();
						close_bt.show();
						tips_sound.play();
					} else {
						box.hide();
						close_bt.hide();
						tips_sound.stop();
					}
					$.each(data, function(key, val) {
						html += '<div class="alert_dialog"><div class="alert_dialog_head"><div class="text_pad10">警告！</div></div>' +
							'<div class="alert_dialog_body"><div class="alert_dialog_body_cont">' + val.msg + '</div><div class="alert_dialog_body_date">' + dateFormat(val.time) + '</div></div><div class="alert_dialog_footer">' +
							'<a data-id="'+val.traillogid+'" class="alert_dialog_bt bt_danger" target="_blank" href="'+val.url+'">查看</a>' +
							'<a data-id="'+val.traillogid+'" class="alert_dialog_bt bt_info" target="_blank">标为已查</a></div></div>'
					});
					close_bt.text(data.length);
					box.html(html);
					setWarningStatus();
				}
				
				function dateFormat(_time)
				{
					return new Date(_time).Format('yyyy-MM-dd hh:mm:ss');
				}
				
				function setWarningStatus(){
					$(".alert_dialog .alert_dialog_bt").on('click', function(){
						var warningMessId = $(this).attr('data-id');
						var dialog = $(this).parents(".alert_dialog");
						if(warningMessId){
							ajaxSend(procWarningMessUrl, 'post', {id: warningMessId}, function(data){
								dialog.remove();
							},function(){
								console.log('网络错误');
							})
							
						}
					})
				}
				
				function dealRecord(arr){
					var record = $("#record_for_warning");
					var textArr = [];
					if(arr && arr[0]){
						record.show();
						$.each(arr, function(key, val){
							var str = "处理人:" + val.handleUserName + " " + val.msg + " 时间：" + val.handleTime;
							textArr.push(str);
						})
						record.text(textArr.join(" , "));
					}else{
						record.hide();
						record.text("暂无处理记录");
					}
				}

				function listen() {
					ajaxSend(getWarningMessUrl, 'get', {sad:"asd"},
						function(data) {
							var action = checkDiff(warningArr, data.needdeal);
							alertTip(action);
							dealRecord(data.hasDone);
							setTimeout(function() {
								listen();
							}, 1000);
						},
						function(err) {
							console.log('网络错误');
							setTimeout(function() {
								listen();
							}, 1000);
						}
					);
				}

				listen();
			})
			
			Date.prototype.Format = function (fmt) {
			    var o = {
			        "M+": this.getMonth() + 1, //月份 
			        "d+": this.getDate(), //日 
			        "h+": this.getHours(), //小时 
			        "m+": this.getMinutes(), //分 
			        "s+": this.getSeconds(), //秒 
			        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
			        "S": this.getMilliseconds() //毫秒 
			    };
			    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
			    for (var k in o)
			    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			    return fmt;
			}
		</script>
	</head>
	<body class="">
	    <div class="container home-content full-img-bk">
	    	
	    	<div class="home-title">
	    		欢迎登陆重庆国博博览中心人员及物品动态监控系统
	    	</div>
	    	
	    	<div class="divide-row">
	    		<a href="${ctx}/sysIndex" class="btn-info">
	    			<i class="fa fa-address-book"></i>
	    			<div class="icon-explain">系统管理</div>
	    		</a>
	    		<a href="${ctx}/sysIndex?topnode=0&node=${ctx}/guobo/location" class="btn-success">
	    			<i class="fa fa-crosshairs"></i>
	    			<div class="icon-explain">展馆位置管理</div>
	    		</a>
	    		<a href="${ctx}/sysIndex?topnode=0&node=${ctx}/guobo/rw" class="btn-danger">
	    			<i class="fa fa-credit-card-alt"></i>
	    			<div class="icon-explain">读写器管理</div>
	    		</a>
	    		<a href="${ctx}/sysIndex?topnode=0&node=${ctx}/guobo/camera" class="btn-warning">
	    			<i class="fa fa-camera"></i>
	    			<div class="icon-explain">摄像头管理</div>
	    		</a>
	    		<a href="${ctx}/sysIndex?topnode=0&node=${ctx}/guobo/asset/list" class="btn-primary">
	    			<i class="fa fa-money"></i>
	    			<div class="icon-explain">资产管理</div>
	    		</a>
	    		<a href="${ctx}/sysIndex?topnode=0&node=${ctx}/guobo/warningRole" class="btn-warning">
	    			<i class="fa fa-bell"></i>
	    			<div class="icon-explain">预警规则管理</div>
	    		</a>
	    		<a href="${ctx}/sysIndex?topnode=0&node=${ctx}/guobo/participant" class="btn-success">
	    			<i class="fa fa-users"></i>
	    			<div class="icon-explain">参会人管理</div>
	    		</a>
	    		<a href="${ctx}/sysIndex?topnode=0&node=${ctx}/guobo/trailLog/list" class="btn-danger">
	    			<i class="fa fa-code-fork"></i>
	    			<div class="icon-explain">轨迹查询</div>
	    		</a>
	    	</div>
	    </div>
	    <marquee id="record_for_warning"></marquee>
	</body>	
</html>
